<template>
    <div>
        <mainTitleText>
            <span slot="account" class="account">我的公告</span>
            <span slot="accountEnglish">MY ANNOUNCEMENT</span>
        </mainTitleText>
        <div class="buttons" v-if="!isShowDetail">
            <button class="layui-btn layui-btn-sm layui-btn-primary" :class="{active:isActive}" @click="unRead">
                未读公告({{number}})
            </button>
            <button class="layui-btn layui-btn-sm layui-btn-primary" :class="{active:!isActive}" @click="all">全部公告</button>
        </div>
        <div class="main" v-if="!isShowDetail">
            <div class="search">
                <span v-if="isActive">未读公告 共{{count}}条</span>
                <span v-else>全部公告 共{{count}}条</span>
                <form action="" class="layui-form layui-form-pane form1">
                    <div class="layui-form-item">
                        <div class="layui-input-block">
                            <input
                                    type="text"
                                    name="text"
                                    required=""
                                    v-model="search"
                                    onkeydown="if(event.keyCode==13)return false;"
                                    @keyup.enter="searchPush"
                                    lay-verify="required"
                                    placeholder="请输入关键字"
                                    autocomplete="off" class="layui-input">
                        </div>
                        <label class="layui-form-label" @click="searchPush">
                            <i></i>
                        </label>
                    </div>
                </form>
            </div>
            <announcement
                    :information="information"
                    :urls="urls"
                    v-if="isActive"
                    @detail="detail($event)"></announcement>
            <announcement
                    :information="information"
                    :urls="urls"
                    v-if="!isActive"
                    @detail="detail($event)"></announcement>
        </div>
        <div class="main" v-if="isShowDetail" >
            <announcementDetail
                    :urls="urls"
                    :id="id"
                    @detail="detail($event)"></announcementDetail>
        </div>
    </div>
</template>

<script>
    import mainTitleText from '@/components/module/mainTitleText'
    import announcement from '@/components/module/announcement'
    import announcementDetail from '@/components/module/announcementDetail'
    import $ from 'jquery'
    export default {
        name: "myAnnouncement",
        props:['urls','number'],
        components:{
            mainTitleText:mainTitleText,
            announcement:announcement,
            announcementDetail:announcementDetail
        },
        data(){
            return {
                search:'',
                isActive:true,
                information:{
                    list:[],
                    hideEdit:false,
                },
                page:1,
                limit:3,
                count:0,
                isShowDetail:false,
                id:0

            }
        },
        created(){
            this.getItem(this.page,this.limit);
        },
        computed:{

        },
        methods:{
            all(){
                this.isActive = false;
                this.getItem(this.page,this.limit);
            },
            unRead(){
                this.isActive = true;
                this.getItem(this.page,this.limit);
                // this.$emit('give',this.count);
            },
            getItem(p,l){
                var _this = this;
                var url = !this.isActive?this.urls.myAnnouncement.readList:this.urls.myAnnouncement.unReadList;
                $.ajax({
                    url:url,
                    type:'post',
                    data:{page:p,limit:l,search:_this.search},
                    success:function(res){
                        _this.information.list = [];
                        _this.information.list.push(...res.data);
                        // console.log(_this.information.list)
                        layui.use('laypage',function(){//分页功能
                            var laypage = layui.laypage;
                            laypage.render({
                                elem: 'list'
                                ,count: res.count
                                ,limit:l
                                ,curr:p
                                ,layout: ['count', 'prev', 'page', 'next', 'refresh', 'skip']
                                ,jump: function(obj,first){
                                    _this.count = obj.count;
                                    _this.page = obj.curr;
                                    _this.limit = obj.limit;
                                    if(!first) {
                                        _this.getItem(_this.page,_this.limit);
                                    }
                                }
                            });
                        })
                    },
                    error(msg){
                        console.log(msg)
                    }
                })
            },
            detail(msg){
                this.id = msg;
                this.isShowDetail = msg;
            },
            searchPush(){
                // console.log(this.search)
                this.getItem(this.page,this.limit)
            }
        },
        watch:{
            isActive:function(a,b){
                // console.log(a,b)
                // if(a)
                // this.getItem(this.page,this.limit);
            },
            isShowDetail:function(a,b){
                // console.log(a,b)
                if(b)
                this.getItem(this.page,this.limit);
            }
        }
    }
</script>

<style scoped lang = "less">
    @import "../../static/css/style.less";
    .buttons{
        .layui-btn-primary:hover{
            border:1px solid #ccc;
        }
        .active{
            .blg(to right, #cd1f5c, #e11e27);
            color: @cf;
            border: 1px solid transparent;
        }
        .active:hover{
            border: 1px solid transparent;
        }
    }
    .main{
        background-color: @cf;
        padding: 20px;
        .bs(0 0 5px #ccc);
        margin-top: 20px;
        .search {
            width: 100%;
            height: 40px;
            line-height: 30px;
            padding: 5px 20px;
            background-color: #ededed;
            > span, > .form1 {
                .fl;
            }
            > .form1 {
                .fr;
                .layui-form-item {
                    .pr;
                    .layui-input-block {
                        width: 220px;
                        height: 30px !important;
                        margin: 0 38px 0 0;
                        input {
                            height: 30px !important;
                            .br(2px 0 0 2px);
                        }
                    }
                    label {
                        width: 40px;
                        height: 30px;
                        .pa;
                        top: 0;
                        right: 0;
                        .br(0 2px 2px 0);
                        cursor: pointer;
                        .blg(to right, #cd1f5c, #e11e27);
                        i {
                            width: 15px;
                            height: 15px;
                            display: inline-block;
                            .pa;
                            .cm;
                            .bud("../../static/images/search.svg", center center, 100% 100%);
                        }
                    }
                }
            }

        }
    }
</style>